<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="theme-color" content="#2563eb">
    <title>豪华地产 - 编辑个人资料</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="css/main.css">
</head>
<body class="bg-gray-50 text-gray-800">
    <div class="page min-h-screen pb-8">
        <!-- 顶部导航栏 -->
        <div class="sticky top-0 z-10 bg-white shadow-sm">
            <div class="flex items-center justify-between p-4">
                <a href="my.html" class="flex items-center">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
                    </svg>
                </a>
                <h1 class="text-lg font-bold">编辑个人资料</h1>
                <button id="saveBtn" class="text-blue-600 font-medium">保存</button>
            </div>
        </div>

        <!-- 头像编辑 -->
        <div class="bg-white p-6 flex flex-col items-center">
            <div class="relative mb-6">
                <div class="w-24 h-24 bg-gray-200 rounded-full overflow-hidden border-2 border-white shadow-lg">
                    <img src="https://randomuser.me/api/portraits/men/25.jpg" alt="用户头像" class="w-full h-full object-cover">
                </div>
                <label for="avatarUpload" class="absolute right-0 bottom-0 bg-blue-600 text-white rounded-full p-2 border-2 border-white shadow cursor-pointer">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
                    </svg>
                </label>
                <input type="file" id="avatarUpload" class="hidden" accept="image/*">
            </div>
            <p class="text-sm text-gray-500 mb-4">点击上传或更改头像</p>
        </div>

        <!-- 表单项目 -->
        <div class="bg-white mt-4">
            <div class="border-b border-gray-100">
                <div class="flex justify-between items-center p-4">
                    <div class="text-gray-600">昵称</div>
                    <div class="flex items-center">
                        <input type="text" value="李先生" class="text-right outline-none text-gray-800">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400 ml-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                        </svg>
                    </div>
                </div>
            </div>
            <div class="border-b border-gray-100">
                <div class="flex justify-between items-center p-4">
                    <div class="text-gray-600">手机号</div>
                    <div class="flex items-center">
                        <span class="text-gray-800">138****8888</span>
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400 ml-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                        </svg>
                    </div>
                </div>
            </div>
            <div class="border-b border-gray-100">
                <div class="flex justify-between items-center p-4">
                    <div class="text-gray-600">性别</div>
                    <div class="flex items-center">
                        <select class="text-right outline-none bg-transparent text-gray-800 pr-2">
                            <option value="male" selected>男</option>
                            <option value="female">女</option>
                            <option value="other">保密</option>
                        </select>
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                        </svg>
                    </div>
                </div>
            </div>
            <div class="border-b border-gray-100">
                <div class="flex justify-between items-center p-4">
                    <div class="text-gray-600">生日</div>
                    <div class="flex items-center">
                        <input type="date" value="1990-01-01" class="text-right outline-none text-gray-800">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400 ml-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                        </svg>
                    </div>
                </div>
            </div>
        </div>

        <!-- 头像选择模态框 -->
        <div id="avatarModal" class="fixed inset-0 bg-black/70 z-50 hidden">
            <div class="absolute bottom-0 left-0 right-0 bg-white rounded-t-2xl max-h-[80vh] overflow-y-auto">
                <div class="sticky top-0 bg-white p-4 border-b border-gray-100 flex justify-between items-center">
                    <h3 class="text-lg font-bold">选择头像</h3>
                    <button class="p-2" onclick="document.getElementById('avatarModal').classList.add('hidden')">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                        </svg>
                    </button>
                </div>
                <div class="p-4">
                    <div class="mb-4">
                        <h4 class="text-sm text-gray-500 mb-2">从相册选择</h4>
                        <button class="w-full bg-gray-100 py-3 rounded-lg text-gray-600 flex items-center justify-center">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                            </svg>
                            打开相册
                        </button>
                    </div>
                    <div class="mb-6">
                        <h4 class="text-sm text-gray-500 mb-2">系统头像</h4>
                        <div class="grid grid-cols-4 gap-4">
                            <div class="avatar-option w-16 h-16 rounded-full overflow-hidden border-2 border-transparent hover:border-blue-600 cursor-pointer">
                                <img src="https://randomuser.me/api/portraits/men/32.jpg" class="w-full h-full object-cover">
                            </div>
                            <div class="avatar-option w-16 h-16 rounded-full overflow-hidden border-2 border-transparent hover:border-blue-600 cursor-pointer">
                                <img src="https://randomuser.me/api/portraits/women/44.jpg" class="w-full h-full object-cover">
                            </div>
                            <div class="avatar-option w-16 h-16 rounded-full overflow-hidden border-2 border-transparent hover:border-blue-600 cursor-pointer">
                                <img src="https://randomuser.me/api/portraits/men/86.jpg" class="w-full h-full object-cover">
                            </div>
                            <div class="avatar-option w-16 h-16 rounded-full overflow-hidden border-2 border-transparent hover:border-blue-600 cursor-pointer">
                                <img src="https://randomuser.me/api/portraits/women/63.jpg" class="w-full h-full object-cover">
                            </div>
                            <div class="avatar-option w-16 h-16 rounded-full overflow-hidden border-2 border-transparent hover:border-blue-600 cursor-pointer">
                                <img src="https://randomuser.me/api/portraits/men/54.jpg" class="w-full h-full object-cover">
                            </div>
                            <div class="avatar-option w-16 h-16 rounded-full overflow-hidden border-2 border-transparent hover:border-blue-600 cursor-pointer">
                                <img src="https://randomuser.me/api/portraits/women/14.jpg" class="w-full h-full object-cover">
                            </div>
                            <div class="avatar-option w-16 h-16 rounded-full overflow-hidden border-2 border-transparent hover:border-blue-600 cursor-pointer">
                                <img src="https://randomuser.me/api/portraits/men/28.jpg" class="w-full h-full object-cover">
                            </div>
                            <div class="avatar-option w-16 h-16 rounded-full overflow-hidden border-2 border-transparent hover:border-blue-600 cursor-pointer">
                                <img src="https://randomuser.me/api/portraits/women/90.jpg" class="w-full h-full object-cover">
                            </div>
                        </div>
                    </div>
                    <button class="w-full bg-blue-600 text-white rounded-full py-3 font-medium shadow-lg shadow-blue-600/20">
                        确认
                    </button>
                </div>
            </div>
        </div>

    </div>

    <script src="js/main.js"></script>
    <script src="js/profile-edit.js"></script>
</body>
</html> 